<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>固定的头部和底部</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../test.css">
<style>
body { background-color: #f0f0f0; }
p > a { color: green; }
.btn { background-color: #0074d9; }
.tab { position: absolute; width: 100%; height: 100%; white-space: nowrap; text-align: center; }
.tab:after { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
.tab img { vertical-align: middle; }
.tab-inner { height: 256px; position: relative; overflow:hidden; }
</style>
</head>

<body>
<div class="header">
    <a href="javascript:" data-rel="back">返回</a>
    <h1>首页</h1>
</div>

<div id="pageHome" class="page out">
    <div class="content">
        <p>首页内容...本页可垂直滚动...</p>
        <p>首页内容...本页可垂直滚动...</p>
        <p>首页内容...本页可垂直滚动...</p>
        <p>首页内容...本页可垂直滚动...</p>
        <p>首页内容...本页可垂直滚动...</p>
        <p>首页内容...本页可垂直滚动...</p>
        <p>首页内容...本页可垂直滚动...</p>
        <p><a href="1.html">ajax载入页面1</a></p>
        <p><a href="../index.html" data-ajax="false">&laquo; 返回测试引导首页</a></p>
        <div style="height: 1000px;"></div>
    </div>
</div>

<div id="page1" class="page out" data-title="页面1"><div class="content">
	<h3>内部选项卡1</h3>
    <div>
    	<a href="a.html" class="btn" data-container="tab_container" data-classpage="tab" data-rel="auto">加载图片1</a>
        <a href="b.html" class="btn" data-container="tab_container" data-classpage="tab" data-rel="auto">加载图片2</a>
    </div>
    <div id="tab_container" class="tab-inner"></div>
</div></div>
<div id="page2" class="page out" data-title="页面2"><div class="content">页面2内容...</div></div>
<div id="page3" class="page out" data-title="页面3"><div class="content">页面3内容...</div></div>
<!--<div id="container"></div>-->
<div class="footer">
    <h4><a href="#pageHome" data-rel="auto">首页</a></h4>
    <!--<h4><a href="1.html" data-rel="auto" data-container="container">页面1</a></h4>
    <h4><a href="2.html" data-rel="auto" data-container="container">页面2</a></h4>-->
    <h4><a href="#page1" data-rel="auto">页面1</a></h4>
    <h4><a href="#page2" data-rel="auto">页面2</a></h4>
    <h4><a href="#page3" data-rel="auto">页面3</a></h4>
</div>



<script src="../../src/mobilebone.js"></script>
<script src="../complex/js/fastclick.js"></script>
<script>
FastClick.attach(document.body);
</script>
<script>
Mobilebone.callback = function(page_in, page_out) {
	var id_in = page_in.id, id_out = "";
	if (!id_in) return;
	var ele_link_in = null, ele_link_out = null;
	if (ele_link_in = document.querySelector(".footer a[href$="+ id_in +"]")) {
		ele_link_in.classList.add("active");
	}
	if (page_out) {
		id_out = page_out.id;
		ele_link_out = id_out && document.querySelector(".footer a[href$="+ id_out +"]");
		ele_link_out && ele_link_out.classList.remove("active");
	}
	
	if (id_in == "page1") {
		Mobilebone.handleTapEvent(page_in.querySelector(".btn"));
	}
}
</script>
</body>
</html>
